<template>
    <el-collapse class="w-full" v-model="activeName">
        <el-collapse-item name="active1">
            <template #title>
                <div class="flex justify-between w-full bg-#F4F5F6 pl-15px">
                    <div class="flex items-center">
                        <div class="icon-box mr-15px">
                            <div class="icon-edit"></div>
                        </div>
                        <div class="text-black font-bold">{{ title }}</div>
                    </div>
                    <div class="pr-15px">
                        <el-icon @click.stop="onDelete">
                            <Delete />
                        </el-icon>
                        <img class="w-16px h-16px ml-16px" src="../../../assets/image/membership/icon-arrow.png" />
                    </div>
                </div>
            </template>
            <div class="pt-20px">
                <formComponent ref="formRef" v-model:value="formValue" :form-data="formData" @valueChanged="handleValueChange"/>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script setup lang="ts">
import { ref, watch, PropType } from 'vue'
import formComponent from '@/components/form-component/index.vue'
import type { AnyObject } from '@/api/type'
import type { FormDataDto } from '@/components/form-component/type'
import { debounce } from 'lodash'

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    formData: {
        type: Object as PropType<FormDataDto>,
        required: true
    },
    value: {
        type: Object as PropType<AnyObject>,
        default: () => ({})
    }
})

const formRef = ref()

const emits = defineEmits(['delete', 'valueChange', 'update:value'])

const activeName = ref(['active1'])

const formValue = ref<AnyObject>({})

const onDelete = () => {
    emits('delete')
}

const getFormValue = () => {
    return formRef.value?.getFormValue()
}

const setFormValue = (defaultValue?: AnyObject) => {
    formRef.value.setFormValue(defaultValue)
}

const submit = async () => {
    await formRef?.value?.handleValidate()
    return formRef?.value?.getFormValue()
}

const handleValueChange = (ev: AnyObject) => {
    emits('valueChange', ev)
}

defineExpose({
    submit,
    getFormValue,
    setFormValue,
    formRef
})

watch(() => props.value, (newval) => {
    formValue.value = newval
}, {
    immediate: true
})

watch(() => formValue.value, debounce((newval) => {
    emits('update:value', newval)
}, 300), {
    deep: true
})

</script>
<style lang="scss" scoped>
.icon-box {
    display: flex;
    width: 16px;
    height: 16px;
    justify-content: center;
    align-items: center;
}

.icon-edit {
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background: #6B6B86;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: -4px;
        width: 10px;
        height: 2px;
        border-radius: 1px;
        background: #6B6B86;
    }

    &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 10px;
        height: 2px;
        border-radius: 1px;
        background: #6B6B86;
    }
}

:deep(.el-collapse-item__content) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
</style>
